<template>
    <view class="container">
      <!-- 资讯列表 -->
      <scroll-view class="list-scroll" scroll-y>
        <view 
          v-for="(item, index) in newsList" 
          :key="index"
          @click="goToDetail(item.id)"
          class="info-card"
        >
          <image class="info-image" :src="BASE_URL+item.imgUrl" mode="aspectFill" />
          <view class="info-content">
            <text class="info-title">{{ item.title }}</text>
            <text class="info-desc">{{ item.content }}</text>
            <text class="info-date">{{ formatDate(item.publishTime) }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </template>
  
  <script>
  import { getNewsList,getNewsCategoryList } from '@/api/news'
  import { formatDate } from '@/utils/dateUtils';
  import {BASE_URL} from '@/utils/request'
  export default {
    data() {
      return {
        BASE_URL: BASE_URL,
        activeNav: 3,
        searchKey: '',
        navItems: [{id:0,categoryName:'全部'}],
        newsList: [
          // 原始数据保持不动
          
        ]
      }
    },
    async created() {
      // 从storage变量获取参数
      try {
        // 获取新闻分类列表
        const res = await getNewsCategoryList(0)
        if(res){
          for (let i = 0; i < res.length; i++) {
            const element = res[i];
            this.navItems.push({
              id: element.id,
              categoryName:element.categoryName
            });
          }
        }
      } catch (error) {
        console.error('获取新闻列表失败', error)
      }
    },
    methods: {
      formatDate,
      async goSearch() {
        try {
          // 获取全部新闻列表
          this.newsList = [];
          let param = {
            title:this.searchKey,
            category:this.activeNav,
            pageNum:1,
            count:20
          }
          const res = await getNewsList(param)
          if(res && res.list && res.list.length > 0){
            res.list = res.list.map(item => {
              // 去除HTML标签并截取前100个字符
              item.content = item.content
                .replace(/<[^>]+>/g, '') // 去除HTML标签
                .substring(0, 100) // 截取前100个字符
                .trim(); // 去除首尾空格
              return item;
            });
            this.newsList = res.list;
          }
        } catch (error) {
          console.error('获取新闻列表失败', error)
        }
      },
      goToDetail(id) {
        uni.navigateTo({
          url: `/pages/info/detail?id=${id}`
        })
      }
    },
    async onShow(){
      const tempInfoType = uni.getStorageSync('tempInfoType');
      if (tempInfoType) {
        this.activeNav = tempInfoType;
        // console.log('接收到参数：', this.activeNav);
        // 清除 Storage 数据
        uni.removeStorageSync('tempInfoType');
      }
      try {
        // 获取全部新闻列表
        let param = {
          pageNum:1,
          count:20,
          category : this.activeNav
        }
        if(this.activeNav != 0){
         
        }
        // 获取全部新闻列表
        this.newsList = [];
        const res = await getNewsList(param)
        if(res && res.list && res.list.length > 0){
            res.list = res.list.map(item => {
              // 去除HTML标签并截取前100个字符
              item.content = item.content
                .replace(/<[^>]+>/g, '') // 去除HTML标签
                .substring(0, 100) // 截取前100个字符
                .trim(); // 去除首尾空格
              return item;
            });
          this.newsList = res.list;
  
        }
      } catch (error) {
        console.error('获取新闻列表失败', error)
      }
    }
  }
  </script>
  
  <style>
  .container {
    padding: 15px;
    background: #f5f5f5;
    /* 原高度设置移除 */
  }
  
  /* 固定搜索框 */
  .search-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    margin: 15px; /* 保持原有外边距 */
    box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
  }
  
  /* 固定导航栏 */
  .nav-scroll {
    position: fixed;
    top: 60px; /* 原80px减少20px */
    padding: 5px 0; /* 减小垂直间距 */
  }
  
  .list-scroll {
    margin-top: 0px; /* 原140px减少40px */
    height: calc(100vh - 100px); /* 对应调整高度 */
  }
  
  /* 调整搜索框下边距 */
  .search-box {
    margin: 15px 15px 10px; /* 下边距从15px减到10px */
  }
  
  /* 原其他样式保持不变 */
  .search-box {
    background: #fff;
    border-radius: 20px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  .search-input {
    flex: 1;
    font-size: 14px;
  }
  .search-icon {
    width: 20px;
    height: 20px;
  }
  
  /* 导航栏样式 */
  .nav-scroll {
    white-space: nowrap;
    margin-bottom: 15px;
  }
  .nav-item {
    display: inline-block;
    padding: 8px 15px;
    margin-right: 10px;
    font-size: 14px;
    color: #666;
  }
  .active {
    color: #1a73e8;
    border-bottom: 2px solid #1a73e8;
  }
  
  /* 资讯卡片样式 */
  .info-card {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
  }
  .info-image {
    width: 30%;
    height: 100px;
    border-radius: 6px;
    margin-right: 10px;
  }
  .info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .info-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .info-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .info-date {
    font-size: 12px;
    color: #999;
    text-align: right;
  }
  </style>